<!doctype html>
<html lang="en">
<head>
    <title>FormDecorator - Overview</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="%description%" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />

    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    
    <link href="../../themes/wijmo/jquery.wijmo.wijsuperpanel.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijlist.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijtextbox.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijdropdown.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijradio.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijcheckbox.css" rel="stylesheet" type="text/css" />
    <script src="../../external/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.bgiframe-2.1.3-pre.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijutil.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijsuperpanel.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijlist.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijdropdown.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijradio.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijcheckbox.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijtextbox.js" type="text/javascript"></script>
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $(":input[type='text'],:input[type='password'],textarea").wijtextbox();
            $("#select1").wijdropdown();
            $(":input[type='radio']").wijradio();
            $(":input[type='checkbox']").wijcheckbox();
            $("#wijmo-button").button();
            $("#wijmo-button").click(function () { return false; });
        });
    </script>
    <style type="text/css">
        .formdecorator label
        {
            display: block;
        }
        
        .formdecorator
        {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .formdecorator li
        {
            clear: both;
            margin-bottom: 1em;
        }
    </style>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Overview</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <form action="overview.html">
            <ul class="formdecorator">
                <li>
                    <h3>
                        Input
                    </h3>
                    <input id="textbox" type="text" />
                </li>
                <li>
                    <h3>
                        TextArea</h3>
                    <textarea id="area" rows="2" cols="50"></textarea>
                </li>
                <li>
                    <h3>
                        Dropdown with Optgroups</h3>
                    <select id="select1">
                        <optgroup label="A-G">
                            <option>A</option>
                            <option selected="selected">B</option>
                            <option>C</option>
                            <option>D</option>
                            <option>E</option>
                            <option>F</option>
                            <option>G</option>
                        </optgroup>
                        <optgroup label="H-M">
                            <option>H</option>
                            <option>I</option>
                            <option>J</option>
                            <option>K</option>
                            <option>L</option>
                            <option>M</option>
                        </optgroup>
                    </select>
                </li>
                <li>
                    <h3>
                        CheckBox</h3>
                    <input id="checkbox1" type="checkbox" /><label for="checkbox1">checkbox1</label>
                    <input id="checkbox2" type="checkbox" /><label for="checkbox2">checkbox2</label>
                    <input id="checkbox3" type="checkbox" /><label for="checkbox3">checkbox3</label>
                    <input id="checkbox4" type="checkbox" /><label for="checkbox4">checkbox4</label>
                </li>
                <li>
                    <h3 id="radiobutton">
                        Radio</h3>
                    <input type="radio" name="radiobutton1" id="radio1" /><label for="radio1">radio1</label>
                    <input type="radio" name="radiobutton1" id="radio2" /><label for="radio2">radio2</label>
                    <input type="radio" name="radiobutton1" id="radio3" /><label for="radio3">radio3</label>
                    <input type="radio" name="radiobutton1" id="radio4" /><label for="radio4">radio4</label>
                </li>
                <li>
                    <h3>
                        Button</h3>
                    <button id="wijmo-button">
                        Submit</button>
                </li>
            </ul>
            </form>
        </div>
        <!-- End demo markup -->
        <div class="demo-options">
            <!-- Begin options markup -->
            <!-- End options markup -->
        </div>
    </div>
    <div class="footer demo-description">
        <p>
            The Wijmo Form Decorator widgets (wijradio, wijcheckbox, wijdropdown, wijtextbox)
            are used to decorate standard HTML form elements. The Form Decorator widgets allow
            any form element to be styled uniformly in any browser.
        </p>
    </div>
</body>
</html>
